import React from 'react'
import Style from './index.module.scss'
import { Layout, Breadcrumb } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { children } from '../router/routes'
const { Header, Content, Footer, Sider } = Layout;

const table: any = {
  '/': '房源管理',
  '/management': '直播管理',
  '/group': '团购管理',
  '/audit': '审核管理',
  '/order': '订单管理',
  '/informAtion': '资讯管理',
  '/broker': '经纪人管理',
}

// 主页
const Index = () => {
  // 路由跳转
  const navigate = useNavigate()
  // 本地路劲
  const location = useLocation()

  // 导航栏点击事件
  const tabClick = (item: any) => {
    navigate(item.path)
  }

  return (
    <div>
      <div style={{ height: '50px', background: 'rgb(67, 129, 230)', paddingLeft: "20px" }}>
        <h1 style={{ lineHeight: "50px", fontSize: '25px', color: 'white' }}>宏烨找房后台管理系统</h1>
      </div>
      <Layout style={{ height: '93vh' }}>
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
        >
          <div className="logo">
            <h2 style={{ color: '#eee', textAlign: 'center', marginTop: '10px' }}>管理员</h2>
          </div>

          {/* 导航栏 */}
          <div style={{ marginTop: '40px' }}>
            {
              children.length && children.map((item: any, ind: any) => {
                return (
                  <p key={ind}
                    className={location.pathname == item.path ? 'active' : 'default'}
                    style={{
                      fontSize: '20px',
                      // paddingLeft: '10px',
                      cursor: 'pointer',
                      lineHeight: '30px',
                      // marginLeft: '35px'
                      textAlign: 'center'
                    }}
                    onClick={() => tabClick(item)}
                  >{item.icon}&nbsp;{item.title}</p>
                )
              })

            }
          </div>

        </Sider>
        <Layout>
          <Header className="site-layout-sub-header-background" style={{ paddingLeft: '24px', margin: '0 16px' }}>
            {/* 面包屑 */}
            <span>{table[location.pathname]}</span>
          </Header>
          <Content style={{ margin: '24px 16px 0' }}>
            <div className="site-layout-background" style={{ padding: 24, minHeight: '85vh' }}>
              <Outlet></Outlet>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design 2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    </div >
  )
}
export default Index